<template>
  <view class="verulia-layout">
    <!-- 导航栏 -->
    <uv-navbar title="控制台" left-icon="" :placeholder="true"></uv-navbar>
    <view class="verulia-layout__body">
      <view v-for="(menu, index) in menuList" :key="index">
        <view class="cu-bar bg-white solid-bottom">
          <view class="action">
            <!-- 统一使用自定义图标库 -->
            <uv-icon
              :name="menu.groupIcon"
              custom-prefix="verulia-icon"
              color="primary"
              size="20"
              :label="menu.groupName"
              label-size="18px"
              space="5px"
            >
            </uv-icon>
          </view>
          <view class="action">
            <!-- 菜单右侧是否需要定义功能在这里 -->
            <!-- 需要在config-json中配置 -->
          </view>
        </view>
        <uv-grid :border="false">
          <uv-grid-item v-for="(item, index2) in menu.list" :key="index2" :custom-style="{ height: '100px' }" @click="handleToMenu(item.path)">
            <view
              class="radius text-center padding-left padding-right"
              style="height: 100%; width: 95%;"
              :style="[{animation: 'fade ' + ((index2+1)*0.2+1) + 's 1'}]"
            >
              <view :class="`menu-grid-icon ` + bgColorList[index2 % 10]">
                <uv-icon custom-prefix="verulia-icon" :name="item.icon" :size="38" color="#ffffff"></uv-icon>
              </view>
              <text class="grid-text">{{ item.title }}</text>
            </view>
          </uv-grid-item>
        </uv-grid>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import list from './config-json'

const { proxy } = getCurrentInstance() as ComponentInternalInstance
/**
 * 菜单列表
 */
const menuList = computed(() => {
  // 权限校验过滤
  return list.map(group => {
    group.list = group.list.filter(item => {
      // 空权限直接放行
      if (!item.permi) {
        return true;
      }
      return proxy?.$auth.hasPermi(item.permi)
    })
    return group ?? [];
  })
})
/** 背景颜色 */
const bgColorList = ref(['bg-red', 'bg-orange', 'bg-olive', 'bg-green', 'bg-cyan', 'bg-blue', 'bg-purple', 'bg-mauve', 'bg-pink', 'bg-brown'])

/** 页面跳转 */
const handleToMenu = (path) => {
  proxy?.$tab.navigateTo(path)
}

onLoad(() => {
})
</script>

<style lang="scss" scoped>
.grid-text {
  font-size: 14px;
  color: #909399;
}

.menu-grid-icon {
  width: 50px;
  height: 50px;
  align-items: center;
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  color: #ffffff;
  font-size: 13px;
  margin: 15px auto 0;
}
</style>
